<template>
  <div class="w-full h-full bg-gradient-to-br from-blue-50 to-gray-100">
    <!-- Header -->
    <header class="w-full h-14 fixed top-0 left-0 z-50 flex justify-center items-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-lg px-4">
      我的页面
    </header>

    <!-- Main Content -->
    <div class="mt-24 px-5 pt-10 max-w-sm mx-auto">
      <div class="bg-white rounded-xl shadow-xl p-6 space-y-6 transform transition-all hover:scale-[1.01] duration-300">
        <h2 class="text-2xl font-bold mb-4">欢迎来到我的页面</h2>
        <p class="text-gray-600">在这里你可以查看个人资料、订单信息等。</p>

        <!-- 示例按钮 -->
        <button @click="$router.push('/')"
                class="w-full h-12 flex justify-center items-center text-gray-700 bg-gray-100 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-200 transition duration-300 focus:outline-none focus:ring-4 focus:ring-gray-300">
          返回首页
        </button>
      </div>
    </div>

    <FooterMenu />
  </div>
</template>

<script setup>
import FooterMenu from '../../components/common/FooterMenu.vue'
</script>

<style scoped>
/* 使用 Unocss 的原子类来替代内联样式 */
.text-primary {
  color: #1e40af; /* 自定义主色调 */
}
</style>



